<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="left">
				<text class="time">9:41</text>
				<text class="company">公司名称</text>
			</view>
			<view class="center">
				<text class="page-title"> 首页</text>
			</view>
			<view class="right">
				<view class="signal"></view>
				<view class="wifi"></view>
				<view class="battery"></view>
				<view class="more">⋯</view>
				<view class="location">��</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar" @click="goToSearch">
				<view class="search-icon">🔍</view>
				<input class="search-input" placeholder="搜索想要的商品" disabled />
				<button class="search-btn">搜索</button>
			</view>
			<view class="cart-icon" @click="goToCart">🛒</view>
		</view>

		<!-- 11.11促销横幅 -->
		<view class="promo-banner">
			<view class="banner-content">
				<view class="main-text">
					<text class="big-text">11.11</text>
					<text class="subtitle">百亿补贴疯狂派发</text>
				</view>
				<view class="discount-tag">跨店满300减50</view>
				<view class="activity-time">活动时间: 11月1日-11月11日</view>
				<view class="grab-btn">抢</view>
			</view>
		</view>

		<!-- 快捷功能图标 -->
		<view class="quick-actions">
			<view class="action-item" @click="goToCart">
				<view class="action-icon">🛒</view>
				<text class="action-text">购物车</text>
			</view>
			<view class="action-item" @click="goToProfile">
				<view class="action-icon">📋</view>
				<text class="action-text">我的订单</text>
			</view>
			<view class="action-item" @click="goToList({category: '新品上架'})">
				<view class="action-icon">📦</view>
				<text class="action-text">新品上架</text>
			</view>
			<view class="action-item" @click="goToCoupon({mode: 'manage'})">
				<view class="action-icon">🎫</view>
				<text class="action-text">领券中心</text>
			</view>
			<view class="action-item" @click="goToList({category: '团购'})">
				<view class="action-icon">👥</view>
				<text class="action-text">团购</text>
			</view>
			<view class="action-item" @click="goToList({category: '秒杀'})">
				<view class="action-icon">⚡</view>
				<text class="action-text">秒杀</text>
			</view>
			<view class="action-item" @click="goToList({category: '满减满赠'})">
				<view class="action-icon">🎁</view>
				<text class="action-text">满减满赠</text>
			</view>
			<view class="action-item" @click="goToCategories">
				<view class="action-icon">☰</view>
				<text class="action-text">全部分类</text>
			</view>
		</view>

		<!-- 热门活动 -->
		<view class="hot-activities">
			<view class="section-header">
				<text class="section-title">热门活动</text>
				<view class="activity-tag">活动</view>
				<text class="view-more" @click="goToList({category: '热门活动'})">查看更多 ></text>
			</view>
			<view class="section-subtitle">618大促,满300减30</view>
			<scroll-view class="product-scroll" scroll-x="true">
				<view class="product-item" v-for="(item, index) in hotProducts" :key="index">
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
					<text class="product-price">¥{{item.price}}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 特色专区 -->
		<view class="special-zones">
			<view class="zone-item" v-for="(zone, index) in specialZones" :key="index" @click="goToList({category: zone.title})">
				<text class="zone-title">{{zone.title}}</text>
				<text class="zone-subtitle">{{zone.subtitle}}</text>
				<image class="zone-image" :src="zone.image" mode="aspectFill"></image>
				<text class="zone-price">¥{{zone.price}}</text>
			</view>
		</view>

		<!-- 商品分类标签 -->
		<view class="category-tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in categoryTabs" 
				:key="index"
				:class="{ active: activeTab === index }"
				@click="setActiveTab(index)"
			>
				<text class="tab-text">{{tab}}</text>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-card" v-for="(product, index) in products" :key="index" @click="goToProduct({id: index, name: product.name})">
				<view class="product-tag" :class="product.tagType">{{product.tag}}</view>
				<image class="product-image" :src="product.image" mode="aspectFill"></image>
				<text class="product-name">{{product.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Navigation from '@/utils/navigation.js';
	import Auth from '@/utils/auth.js';
	
	export default {
		data() {
			return {
				activeTab: 0,
				hotProducts: [
					{ image: '/static/headphones1.png', price: '45.56' },
					{ image: '/static/headphones2.png', price: '45.56' },
					{ image: '/static/headphones3.png', price: '45.56' },
					{ image: '/static/headphones4.png', price: '45.56' }
				],
				specialZones: [
					{ title: '抢购专区', subtitle: '特惠推荐', image: '/static/headphones.png', price: '45.56' },
					{ title: '活动专区', subtitle: '特惠推荐', image: '/static/headphones.png', price: '45.56' },
					{ title: '张三的店', subtitle: '特惠推荐', image: '/static/headphones.png', price: '45.56' },
					{ title: '品牌专区', subtitle: '品牌精选', image: '/static/headphones.png', price: '45.56' }
				],
				categoryTabs: ['美食', '水果', '新能源新品', '标签名称', '标签名称'],
				products: [
					{ tag: '爆品', tagType: 'hot', image: '/static/corn.png', name: '商品名称名称名称名称名' },
					{ tag: '活动', tagType: 'activity', image: '/static/corn.png', name: '湖南鲜甜超级玉米玉米' }
				]
			}
		},
		onLoad() {
			// 检查登录状态
			this.checkLoginStatus();
		},
		onShow() {
			// 每次显示页面时检查登录状态
			this.checkLoginStatus();
		},
		methods: {
			checkLoginStatus() {
				// 检查是否已登录，如果未登录则跳转到登录页
				if (!Auth.isLoggedIn()) {
					Navigation.goToLogin();
				}
			},
			setActiveTab(index) {
				this.activeTab = index;
			},
			goToSearch() {
				Navigation.goToSearch();
			},
			goToCart() {
				Navigation.goToCart();
			},
			goToProfile() {
				Navigation.goToProfile();
			},
			goToList(params) {
				Navigation.goToList(params);
			},
			goToCoupon(params) {
				Navigation.goToCoupon(params);
			},
			goToCategories() {
				Navigation.goToCategories();
			},
			goToProduct(params) {
				Navigation.goToProduct(params);
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 状态栏样式 */
.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.left, .right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.time {
	font-size: 28rpx;
	font-weight: bold;
}

.company {
	font-size: 24rpx;
	color: #666;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.right {
	gap: 15rpx;
}

/* 搜索栏样式 */
.search-section {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	gap: 20rpx;
}

.search-bar {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 50rpx;
	padding: 15rpx 20rpx;
}

.search-icon {
	margin-right: 15rpx;
	font-size: 32rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
}

.search-btn {
	background-color: #ff6b35;
	color: white;
	border: none;
	border-radius: 25rpx;
	padding: 10rpx 20rpx;
	font-size: 24rpx;
}

.cart-icon {
	font-size: 40rpx;
	color: #ff4757;
}

/* 促销横幅样式 */
.promo-banner {
	background: linear-gradient(135deg, #ff6b35, #ff8c42);
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	position: relative;
	overflow: hidden;
}

.banner-content {
	color: white;
	position: relative;
	z-index: 2;
}

.main-text {
	margin-bottom: 20rpx;
}

.big-text {
	font-size: 60rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 32rpx;
	display: block;
}

.discount-tag {
	background-color: #ff4757;
	color: white;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	display: inline-block;
	margin-bottom: 15rpx;
}

.activity-time {
	font-size: 24rpx;
	opacity: 0.9;
}

.grab-btn {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	background-color: #ff4757;
	color: white;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
}

/* 快捷功能样式 */
.quick-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
	padding: 30rpx;
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 20rpx;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15rpx;
}

.action-icon {
	width: 80rpx;
	height: 80rpx;
	background-color: #ff6b35;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	color: white;
}

.action-text {
	font-size: 24rpx;
	color: #333;
}

/* 热门活动样式 */
.hot-activities {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.activity-tag {
	background-color: #ff4757;
	color: white;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;
	margin-left: 15rpx;
}

.view-more {
	color: #666;
	font-size: 24rpx;
}

.section-subtitle {
	color: #666;
	font-size: 26rpx;
	margin-bottom: 20rpx;
}

.product-scroll {
	white-space: nowrap;
}

.product-item {
	display: inline-block;
	margin-right: 20rpx;
	text-align: center;
}

.product-item .product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
	margin-bottom: 10rpx;
}

.product-price {
	color: #ff4757;
	font-size: 26rpx;
	font-weight: bold;
}

/* 特色专区样式 */
.special-zones {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15rpx;
	padding: 0 30rpx;
	margin-bottom: 20rpx;
}

.zone-item {
	background-color: #fff;
	border-radius: 15rpx;
	padding: 20rpx 15rpx;
	text-align: center;
}

.zone-title {
	font-size: 24rpx;
	color: #333;
	font-weight: bold;
	display: block;
	margin-bottom: 5rpx;
}

.zone-subtitle {
	font-size: 20rpx;
	color: #666;
	display: block;
	margin-bottom: 15rpx;
}

.zone-image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

.zone-price {
	color: #ff4757;
	font-size: 24rpx;
	font-weight: bold;
}

/* 分类标签样式 */
.category-tabs {
	display: flex;
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 20rpx;
	padding: 20rpx 30rpx;
	overflow-x: auto;
}

.tab-item {
	padding: 15rpx 25rpx;
	margin-right: 20rpx;
	border-radius: 25rpx;
	white-space: nowrap;
}

.tab-item.active {
	background-color: #ff6b35;
	color: white;
}

.tab-text {
	font-size: 26rpx;
}

/* 商品列表样式 */
.product-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	padding: 0 30rpx 30rpx;
}

.product-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	position: relative;
}

.product-tag {
	position: absolute;
	top: 15rpx;
	left: 15rpx;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;
	color: white;
	z-index: 1;
}

.product-tag.hot {
	background-color: #ff4757;
}

.product-tag.activity {
	background-color: #ff6b35;
}

.product-image {
	width: 100%;
	height: 200rpx;
	border-radius: 15rpx;
	margin-bottom: 15rpx;
}

.product-name {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
</style>